<template>
  <view class="course_detail">
    <!-- 头部 -->
    <u-sticky offset-top="0" bg-color="#f5f5f5" h5-nav-height="0">
      <nav-bar>
        <view
          class="iconfont"
          :class="
            courseDetail.boolCollect === 0
              ? 'icon-31shoucang'
              : 'icon-shoucangfill'
          "
          @click="clickCollect"
        >
        </view>
        <view class="iconfont icon-share" v-if="!isWx"></view>
      </nav-bar>
    </u-sticky>

    <!-- 内容主体 -->
    <view class="content">
      <view class="header_warp" v-if="courseDetail.playType != 3">
        <video
          :id="myVideo"
          :src="watchObj.playURL"
          :controls="false"
          object-fit="fill"
          :duration="courseDetail.teachingDuration"
          :page-gesture="true"
          :show-mute-btn="true"
          :title="courseDetail.name"
          :enable-play-gesture="true"
          :vslide-gesture="true"
          :poster="courseDetail.coverPath"
          @error="videoErrorCallback"
          @timeupdate="timeupdate"
          @play="play"
        >
          <cover-view
            class="controls_video_warp show_tip_buy"
            v-if="courseDetail.boolPay === 0 && !courseDetail.freeDuration"
          >
            <cover-image
              class="controls-play_img"
              @click="play"
              src="@/static/images/start.png"
            ></cover-image>
            <cover-view class="title">购买后观看完整版本</cover-view>
          </cover-view>
          <cover-view
            class="controls_video_warp"
            v-if="
              isShowTip &&
              ((courseDetail.boolPay === 0 && courseDetail.freeDuration) ||
                courseDetail.boolPay === 1)
            "
          >
            <cover-view class="title">当前为移动网络,请点击播放</cover-view>
            <cover-view class="btn_warp">
              <cover-view class="left_btn" @click="clickPlay"
                >继续播放</cover-view
              >
              <cover-view class="right_btn">退出播放</cover-view>
            </cover-view>
          </cover-view>
        </video>
      </view>
      <template v-else>
        <view class="header_warp">
          <image :src="courseDetail.coverPath" />
        </view>
        <video
          style="display: none"
          :src="watchObj.playURL"
          :controls="false"
          :initial-time="initialTime"
          id="audioId"
          @ended="audioEnded"
          @timeupdate="audioTimeupdate"
        ></video>
        <!-- 工具 -->
        <view class="audio_tools_warp">
          <view class="slider_warp flex_b">
            <view class="time">{{ initial }}</view>
            <view class="slider">
              <u-slider
                v-model="slider"
                height="12"
                @start="sliderStart"
                @end="sliderEnd"
              ></u-slider>
            </view>
            <view class="time">{{ duration }}</view>
          </view>
          <view class="audio_start flex_c">
            <view class="side_image" @click="chanegAudio(-1)">
              <image src="@/static/images/side_left.png" />
            </view>
            <view class="play_image" @click="clickAudioStatus">
              <image
                v-if="playIng == 'start'"
                src="@/static/images/audio_stop.png"
              />
              <image v-else src="@/static/images/audio_start.png" />
            </view>
            <view class="side_image" @click="chanegAudio(1)">
              <image src="@/static/images/side_right.png" />
            </view>
          </view>
        </view>
      </template>

      <!-- 课程 -->
      <view class="audio_warp">
        <view class="live_title_warp">
          <view class="live_title">{{ courseDetail.name }}</view>
          <view class="live_table">
            <block v-if="courseDetail.boolPay == 1">可观看</block>
            <block v-else>付费观看</block>
          </view>
        </view>
        <view class="timer_warp">
          <view class="timer"
            >时长：{{ courseDetail.teachingDuration }}分钟</view
          >
          <view class="people_num">{{ courseDetail.playCount }}人订阅</view>
        </view>
      </view>

      <!-- 拼团课程 -->
      <view class="pintuan_warp" v-if="courseDetail.level == 6">
        <view class="header_warp">
          <view class="money_warp">
            <view class="show_price">{{ courseDetail.groupGold }}</view>
            <view class="icon">积分</view>

            <view class="old_price">{{ courseDetail.gold }}积分</view>
          </view>
          <view class="tar">拼团</view>
        </view>
        <view class="content_warp">
          <view class="con_header">
            <view class="left">
              <view class="show_title">他们正在拼团</view>
              <view class="title">人不满退款</view>
            </view>
            <view class="right" @click="showPopup">拼团规则 ></view>
          </view>
          <view class="content" v-for="item in groupPerson.list" :key="item.id">
            <view class="left">
              <view class="icon">
                <image :src="item.avatarUrl" />
              </view>
              <view class="info">
                <view class="info_top">还差{{ item.needPersons }}人成团</view>
                <view class="info_name">团长：{{ item.nickName }}</view>
              </view>
            </view>
            <view class="right" @click="groupPay(item.userId)">我要参团</view>
          </view>
        </view>
      </view>
      <u-popup
        :show="isShowPopup"
        @close="onClosePopup"
        @open="open"
        mode="center"
        round
      >
        <view class="guize_warp">
          <view class="guize_title">拼团规则</view>
          <text class="guize_content">
            1、拼团是基于多人的组团购买，从而获得超低团购价。选择收费内容并支付后，拼团即刻开启。在活动期内参团人数达到起拼人数，则拼团成功。若单个团的拼团人数未达到起拼人数则失败，系统将自动为您退款。
            2、选择想要的，拼团活动页显示可以参与的团，点击“去参团”完成支付，满足起拼人数后，自动将您拼团成功。
            3、首位选择拼团内容并完成支付的即为团长。团长视为单个子团的发起人，且为第一位支付成功的成员。
            4、在拼团活动有效期内未能拼团成功，系统会自动将你小的款项退还到您的支付账户，具体到账时间以务银行为准。
          </text>
        </view>
      </u-popup>
      <!-- 拼团课程结束 -->

      <!-- tabs -->
      <u-sticky :offsetTop="customNavHeight * toRpx">
        <u-tabs
          :list="tabsList"
          :scrollable="false"
          :current="activeTabIndex"
          name="value"
          @change="activeTabChange"
        ></u-tabs>
      </u-sticky>

      <!-- 内容 -->
      <view class="mian_warp">
        <view class="swiper_warp">
          <swiper
            class="swiper"
            :style="[{ height: swiperHeight + 'px' }]"
            :current="activeTabIndex"
            @change="swiperCurrentChange"
          >
            <swiper-item class="swiper-item">
              <view class="swiper_item_warp">
                <view class="teacher_warp">
                  <view class="teacher_img">
                    <image :src="courseDetail.profilePath"></image>
                  </view>
                  <view class="teacher_name">{{
                    courseDetail.teacherName
                  }}</view>
                </view>
                <view class="coures_introduce">
                  <view class="coures_title coures_teacher_title"
                    >讲师介绍</view
                  >
                  <rich-text
                    class="coures_text"
                    :nodes="courseDetail.teacherIntroduce"
                  ></rich-text>
                </view>
                <view class="coures_introduce" v-if="courseDetail.introduce">
                  <view class="coures_title">课程简介</view>
                  <rich-text
                    class="coures_text"
                    :nodes="courseDetail.introduce"
                  ></rich-text>
                </view>
                <view class="content_warp">
                  <rich-text :nodes="courseDetail.plan"></rich-text>
                </view>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <view class="swiper_item_warp">
                  <view
                    class="directory_item"
                    :class="
                      directoryActiveIndex == index ? 'directory_active' : ''
                    "
                    v-for="(item, index) in section.list"
                    :key="item.id"
                    @click="playSectionVideo(item.videoId, index)"
                  >
                    <view
                      class="directory_title hid1"
                      :class="
                        directoryActiveIndex == index ? 'directory_active' : ''
                      "
                      >{{ index + 1 }} {{ item.name }}</view
                    >
                    <view class="directory_bottom">
                      <view
                        class="directory_bottom_item"
                        :class="
                          directoryActiveIndex == index
                            ? 'directory_active'
                            : ''
                        "
                        >{{ item.createTime | formatTime }}
                      </view>
                      <view
                        class="directory_bottom_item"
                        :class="
                          directoryActiveIndex == index
                            ? 'directory_active'
                            : ''
                        "
                      >
                        <view v-if="item.isFree == 0"> 观看回放 </view>
                        <view v-else>
                          <view v-if="item.freeDuration > 0">试看</view>
                          <view v-else>付费观看</view>
                        </view>
                      </view>
                      <!-- <view class="directory_bottom_item  directory_active flex_a">
            <view class="living_img">
              <image src="../../static/images/living_icon.png" />
            </view>
            直播中
          </view> -->
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item">
                <view class="swiper_item_warp">
                  <view class="comments_view">
                    <view class="comments_score">10.0</view>
                    <view class="comments_score_warp">
                      <view class="comments_score_image">
                        <u-rate
                          active-color="#ffd21e"
                          inactive-color="#eee"
                          gutter="20"
                          :disabled="true"
                          :value="5"
                          :size="40"
                          :allowHalf="true"
                        ></u-rate>
                      </view>
                      <view class="comments_score_item"
                        >共{{ comment.total }}条评价
                      </view>
                    </view>
                    <view class="comments_right">
                      <view class="comments_right_score">10.0</view>
                      <view class="comments_right_score_text">满分</view>
                    </view>
                  </view>
                  <block v-if="comment.list.length > 0">
                    <view
                      class="comments_warp"
                      v-for="item in comment.list"
                      :key="item.id"
                    >
                      <view class="left_image">
                        <view class="image_warp">
                          <image :src="item.userProfile" />
                        </view>
                      </view>
                      <view class="right_warp">
                        <view class="header">
                          <view class="header_left">
                            <view class="wx_name">{{ item.userName }}</view>
                            <view class="score">
                              <u-rate
                                active-color="#ffd21e"
                                inactive-color="#eee"
                                gutter="20"
                                :disabled="true"
                                :value="5"
                                :size="14"
                                :allowHalf="true"
                              ></u-rate>
                            </view>
                          </view>
                          <view class="time">{{ item.createTime }}</view>
                        </view>
                        <view class="comments_content_item">{{
                          item.content
                        }}</view>
                      </view>
                    </view>
                  </block>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <view class="bottom_warp">
          <view class="btn_warp" v-if="activeTabIndex !== 2">
            <template
              v-if="
                courseDetail.playType == 2 && courseDetail.boolMakeAppoint == 0
              "
            >
              <view
                class="left_btn btn"
                :style="{
                  color: '#f34334',
                }"
                @click="clickBottomBtn(0)"
              >
                直播课程
              </view>
              <view class="right_btn btn" @click="clickBottomBtn(1)">
                立即预约
              </view>
            </template>
            <template
              v-else-if="
                courseDetail.playType == 2 && courseDetail.boolMakeAppoint == 1
              "
            >
              <view
                class="left_btn btn"
                :style="{
                  color: '#f34334',
                }"
                @click="clickBottomBtn(0)"
              >
                取消预约
              </view>
              <view class="right_btn btn" @click="clickBottomBtn(1)">
                立即学习
              </view>
            </template>
            <!-- 免费 -->
            <template v-else-if="courseDetail.boolPay === 1">
              <view class="left_btn btn" @click="clickBottomBtn(0)">
                免费
              </view>
              <view class="right_btn btn" @click="clickBottomBtn(1)">
                立即学习
              </view>
            </template>
            <!-- 须购买 -->
            <template v-else-if="courseDetail.boolPay === 0">
              <template v-if="courseDetail.level === '6'">
                <!-- 拼团 -->
                <view
                  class="left_btn btn"
                  :style="{
                    color: '#f34334',
                  }"
                  @click="clickBottomBtn(0)"
                >
                  {{ courseDetail.groupGold }}积分
                </view>
                <view class="right_btn btn" @click="clickBottomBtn(1)">
                  发起拼团
                </view>
              </template>
              <template v-else-if="courseDetail.level === '5'">
                <!-- 秒杀 -->
                <view
                  class="left_btn btn"
                  :style="{
                    color: '#f34334',
                  }"
                  @click="clickBottomBtn(0)"
                >
                  {{ courseDetail.seckillGold }}积分
                </view>
                <view class="right_btn btn" @click="clickBottomBtn(1)">
                  立即购买
                </view>
              </template>

              <template v-else>
                <view
                  class="left_btn btn"
                  :style="{
                    color: '#f34334',
                  }"
                  @click="clickBottomBtn(0)"
                >
                  {{ courseDetail.gold }}积分
                </view>
                <view class="right_btn btn" @click="clickBottomBtn(1)">
                  立即购买
                </view>
              </template>
            </template>
          </view>
          <view class="btn_warp" v-else>
            <input
              type="text"
              disabled
              placeholder="说点生么..."
              @click="goto"
            />
          </view>
          <bottom-safety ref="bottomSafety" class="bottomSafety" />
        </view>
        <view
          class="line"
          :style="{
            height: 60 + padHeight + 15 + 'px',
            width: '100%',
          }"
        >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import {
  getIntroduce,
  getSection,
  getCommentList,
  playSectionVideo,
  freeSectionPlayInchapter,
  liveInchapter,
  joinGroup,
  makeAppointBool,
} from "@/api/course.js";
import { setCollec, getGroupPerson } from "@/api/common.js";
import { showModal, showToast, formatRichText, setHis } from "@/utils/util.js";
import { courseDetailTabs } from "@/config/list";
export default {
  data() {
    return {
      playIng: "stop",
      slider: 0, // 音频
      isWx: false,
      id: "",
      courseDetail: {},
      myVideo: "myVideo",
      isAllow: false,
      tabsList: courseDetailTabs,
      activeTabIndex: 0,
      swiperHeight: 150,
      padHeight: 0,
      groupPerson: {}, // 拼团
      sectionPageNum: 1, // 章节列表页面
      section: {
        list: [],
        total: 0,
      },
      pageSize: 20,
      commentPageNum: 1, // 评论
      comment: {
        list: [],
        total: 0,
      },
      watchObj: {},
      directoryActiveIndex: 0,
      isShowPopup: false, //展示拼团规则
      toRpx: 2,
      customNavHeight: 0,
      initialTime: 0, // 音频默认播放位置
    };
  },
  computed: {
    ...mapState("equipment", ["networkState", "SystemInfo"]),
    isShowTip() {
      return !this.isAllow && this.networkState !== "wifi";
    },
    initial() {
      return setHis(this.initialTime);
    },
    duration() {
      return setHis(Math.ceil(this.watchObj.duration));
    },
  },
  watch: {
    networkState(newVal) {
      if (newVal === "wifi") {
        this.isAllow = true;
      } else {
        showModal({
          content: "当前处于非wifi网络下,是否继续?",
        }).then((res) => {
          if (res) {
            this.isAllow = true;
          } else {
            this.isAllow = false;
          }
        });
      }
    },
  },
  onLoad(options) {
    // #ifdef MP-WEIXIN
    this.isWx = true;
    this.customNavHeight =
      this.$store.getters.headerHeight +
      this.$store.state.equipment.SystemInfo.statusBarHeight -
      1;
    // #endif
    this.id = options.id;
    this.getCourseDetail();
  },
  onHide() {
    uni.createVideoContext(this.myVideo).stop();
    uni.createVideoContext("audioId").stop();
  },
  onReady() {
    // #ifndef MP-WEIXIN
    // this.padHeight = this.$refs.bottomSafety.$el.offsetHeight;
    // #endif
    // #ifdef MP-WEIXIN
    // #endif
    this.toRpx = 750 / this.SystemInfo.windowWidth;

    let query = uni.createSelectorQuery().in(this);
    query
      .select(".bottomSafety")
      .boundingClientRect()
      .exec((res) => {
        this.padHeight = res[0].height;
      });
  },
  methods: {
    // 上下一个音频
    chanegAudio(num) {
      if (num < 0) {
        if (this.directoryActiveIndex === 0) {
          return;
        }
      } else {
        if (this.directoryActiveIndex === this.section.total - 1) {
          return;
        }
      }
      this.directoryActiveIndex = this.directoryActiveIndex + num;
      const ctx = uni.createVideoContext("audioId");
      ctx.stop();
      const videoId = this.section.list[this.directoryActiveIndex];
      this.playSectionVideo(videoId);
    },
    // 音频
    clickAudioStatus() {
      const { watchObj } = this;
      if (watchObj.playURL) {
        const ctx = uni.createVideoContext("audioId");
        if (this.playIng === "stop") {
          // 开始播放
          this.playIng = "start";
          ctx.play();
        } else {
          this.playIng = "stop";
          ctx.pause();
        }
      }
    },
    // 放完
    audioEnded() {
      this.chanegAudio(1);
    },
    audioTimeupdate(e) {
      const { currentTime, duration } = e.detail;
      this.slider = Math.floor((currentTime / duration) * 100);
      this.initialTime = Math.floor(currentTime);
    },
    // 滑块
    sliderStart() {
      const ctx = uni.createVideoContext("audioId");
      ctx.stop();
    },
    sliderMoving() {},
    sliderEnd() {
      this.initialTime = Math.floor(
        (this.watchObj.duration * this.slider) / 100
      );
      console.log(this.initialTime, this.slider);
      const ctx = uni.createVideoContext("audioId");
      this.playIng = "start";
      ctx.seek(this.initialTime);
      ctx.play();
    },
    // 拼团
    groupPay(userId) {
      const { courseDetail } = this;
      this.$ShowModal({
        content: `当前所需 ${courseDetail.groupGold} 积分，是否继续？`,
      }).then((res) => {
        if (!res) return;
        const params = {
          coursePackageId: courseDetail.id,
          userId,
        };
        joinGroup(params).then((res) => {
          console.log(res);
        });
      });
    },

    // 拼团规则  start
    showPopup() {
      this.isShowPopup = true;
    },
    onClosePopup() {
      this.isShowPopup = false;
    },
    // 拼团规则  end
    // 进入课程简介 直接点击播放(点播和音频可调用此接口)
    freeSectionPlayInchapter() {
      freeSectionPlayInchapter({
        id: this.id,
      }).then((res) => {
        this.watchObj = res;
      });
    },
    // 播放一个视频或者音频,获取播放播放地址
    playSectionVideo(videoId, index) {
      if (this.courseDetail.boolPay !== 1 && !this.courseDetail.freeDuration) {
        showToast({
          title: "购买后才能观看!",
        });
        return;
      }
      playSectionVideo({
        videoId,
      }).then((res) => {
        res.minutes = Math.floor(res.duration / 60);
        res.seconds = Math.floor(res.duration % 60);
        this.watchObj = res;
        if (index !== undefined) {
          this.directoryActiveIndex = index;
        }
      });
    },
    // 轮播图切换
    swiperCurrentChange(e) {
      this.activeTabIndex = e.detail.current;
      this.getCurrentSwiperHeight(".swiper_item_warp");
    },
    // 获取每项的高度
    getCurrentSwiperHeight(element) {
      let query = uni.createSelectorQuery().in(this);
      query.selectAll(element).boundingClientRect();
      query.exec((res) => {
        this.swiperHeight = res[0][this.activeTabIndex].height || 180;
      });
    },
    // 点击播放
    clickPlay() {
      this.isAllow = true;
      uni.createVideoContext(this.myVideo).play();
    },
    play(e) {
      if (this.isAllow) {
        const { courseDetail } = this;
        const videoId = e.currentTarget.id;
        if (courseDetail.boolPay !== 1) {
          if (
            courseDetail.freeDuration == null ||
            courseDetail.freeDuration === 0
          ) {
            uni.createVideoContext(videoId).pause();
            return;
          }
        }
      }
    },
    timeupdate(e) {
      if (!this.isAllow) return;
      const { courseDetail } = this;
      if (courseDetail.boolPay !== 1) {
        let currentTime = Number(e.detail.currentTime.toFixed(2));
        if (currentTime > courseDetail.freeDuration) {
          uni.createVideoContext(videoId).pause();
        }
      }
    },
    // 获取课程详情
    async getCourseDetail() {
      const res = await getIntroduce({
        id: this.id,
      });
      res.introduce = formatRichText(res.introduce);
      res.plan = formatRichText(res.plan);
      res.teacherIntroduce = formatRichText(res.teacherIntroduce);
      this.courseDetail = res;
      if (res.level == 6) {
        this.getGroupPerson(res.id); // 拼团列表
      }
      // 1：点播 2：直播 （课程专属）3:随身听
      if (res.playType === 1) {
        // this.freeSectionPlayInchapter(res.id);
        console.log(res.playType, "1：点播");
      } else if (res.playType === 2) {
        // this.liveInchapter(res.id);
        console.log(res.playType, "2：直播");
      } else if (res.playType === 3) {
        // this.playSectionVideo("", res.id);
        console.log(res.playType, "3:随身听");
      }
      // this.freeSectionPlayInchapter(res.id);
      // this.liveInchapter(res.id);

      this.$nextTick(() => {
        this.getSection(res.id);
        this.getCommentList(res.id);
        setTimeout(() => {
          this.getCurrentSwiperHeight(".swiper_item_warp");
        }, 300);
      });
    },
    liveInchapter(id) {
      liveInchapter({
        id,
      }).then((res) => {
        console.log("liveInchapter", res);
      });
    },
    // 拼团
    getGroupPerson(id) {
      getGroupPerson({
        id,
      }).then((res) => {
        this.groupPerson = res || {};
      });
    },
    // 章节列表
    getSection(id) {
      const { section, sectionPageNum, pageSize } = this;
      if (section.total >= (sectionPageNum - 1) * pageSize) {
        getSection({
          id,
          pageNum: sectionPageNum,
          pageSize: pageSize,
        }).then((res) => {
          this.section.list = [...section.list, ...res.list];
          this.section.total = res.total;
          this.sectionPageNum++;
          if (res.list[0]) {
            this.playSectionVideo(res.list[0].videoId);
          }
        });
      }
    },
    // 获取课程评论
    getCommentList(courseId) {
      const { comment, commentPageNum, pageSize } = this;
      if (comment.total >= (commentPageNum - 1) * pageSize) {
      }
      getCommentList({
        courseId,
        current: commentPageNum,
        pageSize,
      }).then((res) => {
        this.comment.list = [...comment.list, ...res.list];
        this.comment.total = res.total;
        this.sectionPageNum++;
      });
    },
    // 收藏
    clickCollect() {
      const { courseDetail } = this;
      const boolCollect = courseDetail.boolCollect === 0 ? 1 : 0;
      setCollec({
        boolCollect,
        coursePackageId: courseDetail.id,
      }).then((res) => {
        this.courseDetail.boolCollect = boolCollect;
      });
    },
    activeTabChange(e) {
      this.activeTabIndex = e;
    },
    videoErrorCallback: function (e) {
      // console.log(e);
    },
    // 是否预约
    makeAppointBool(params) {
      console.log(params);
      makeAppointBool(params).then((res) => {
        this.courseDetail.boolMakeAppoint = params.boolMakeAppoint;
        this.$ShowToast({
          title: params.boolMakeAppoint == 0 ? "取消成功" : "预约成功",
        });
      });
    },
    // 点击底部按钮
    clickBottomBtn(index) {
      const { courseDetail } = this;
      if (index === 0) {
        if (courseDetail.playType == 2 && courseDetail.boolMakeAppoint == 1) {
          const params = {
            boolMakeAppoint: 0,
            coursePackageId: courseDetail.id,
          };
          this.makeAppointBool(params);
        }
      } else {
        if (courseDetail.boolPay === 1) {
          // 直播预约
          if (courseDetail.playType == 2) {
            const params = {
              boolMakeAppoint: courseDetail.boolMakeAppoint ? 0 : 1,
              coursePackageId: courseDetail.id,
            };
            this.makeAppointBool(params);
          }
        } else {
          // 收费
          this.$u.route("/pages/pay_order/pay_order", {
            id: this.id,
          });
        }
      }
    },
    goto() {
      uni.navigateTo({
        url:
          "/pages/course_evaluation/course_evaluation?courseId=" +
          this.courseDetail.id,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          someEvent: () => {
            this.commentPageNum = 1;
            this.comment = [];
            this.getCommentList(this.id);
          },
        },
      });
    },

    // 拼团
    showPopup() {
      console.log("show");
      this.isShowPopup = true;
    },
    onClosePopup() {
      this.isShowPopup = false;
    },
    open() {},

    // 点击右侧图标触发
    onNavigationBarButtonTap(e) {
      console.log(e);
      const index = e.index;
      if (index === 0) {
        console.log("收藏");
      } else if (index === 1) {
        console.log("转发");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.iconfont {
  font-size: 50upx;

  &:nth-child(n + 1) {
    margin-left: 8upx;
  }
}

.content {
  .header_warp {
    width: 100%;
    height: 450upx;
    background-color: #000;

    #myVideo {
      width: 100%;
      height: 100%;

      .controls_video_warp {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #000;

        .title {
          color: #fff;
          font-size: 32upx;
        }

        .btn_warp {
          margin-top: 30upx;
          display: flex;
          align-items: center;

          .left_btn {
            padding: 8upx 30upx;
            border: 5upx solid #fff;
            border-radius: 5upx;
            color: #fff;
          }

          .right_btn {
            padding: 8upx 30upx;
            border: 5upx solid #4d90fe;
            border-radius: 5upx;
            color: #4d90fe;
            margin-left: 50upx;
          }
        }

        .controls-play_img {
          width: 60upx;
          height: 60upx;
          margin-bottom: 30upx;
        }
      }

      // .show_tip_buy {
      //   background: rgba($color: #000000, $alpha: 0.7);
      // }
    }
  }

  .audio_tools_warp {
    width: 750upx;
    height: 220upx;
    background: #ffffff;
    padding: 50upx 30upx;

    .slider_warp {
      width: 100%;
      height: 28upx;

      .time {
        flex-shrink: 0;
        height: 28upx;
        font-size: 20upx;
        font-weight: 500;
        line-height: 28upx;
        color: #999999;
      }

      .slider {
        flex: 1;
        margin: 0 20upx;
      }
    }

    .audio_start {
      margin-top: 34upx;

      .side_image {
        width: 48upx;
        height: 48upx;
      }

      .play_image {
        width: 68upx;
        height: 68upx;
        margin: 0 80upx;
      }
    }
  }

  .audio_warp {
    margin-top: 30upx;
    width: 750upx;
    height: 184upx;
    background: #ffffff;
    padding: 40upx 30upx;
    margin-bottom: 20upx;

    .live_title_warp {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .live_title {
        height: 44upx;
        font-size: 32upx;
        font-weight: bold;
        line-height: 44upx;
      }

      .live_table {
        background: #ffe5e4;
        border-radius: 20upx;
        color: #f34235;
        font-size: 24upx;
        padding: 8upx 20upx;
      }
    }

    .timer_warp {
      margin-top: 20upx;
      height: 40upx;
      font-size: 28upx;
      font-weight: 500;
      line-height: 40upx;
      color: #999999;
      display: flex;
      align-items: center;

      .timer {
      }

      .people_num {
        margin-left: 30upx;
      }
    }
  }

  .pintuan_warp {
    margin: 20upx 0;

    .header_warp {
      padding: 18upx 30upx;
      width: 750upx;
      height: 120upx;
      background: linear-gradient(271deg, #fadb14 0%, #faad14 100%);
      border-radius: 20upx 20upx 0px 0px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .money_warp {
        display: flex;
        font-weight: 800;
        height: 84upx;
        align-items: baseline;

        // align-items: center;
        .icon {
          font-size: 32upx;
        }

        .show_price {
          font-size: 60upx;
        }

        .old_price {
          margin-left: 44upx;
          font-size: 28upx;
          font-weight: 500;
          text-decoration: line-through;
        }
      }

      .tar {
        width: 88upx;
        height: 36upx;
        background: #f34235;
        border-radius: 20upx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .content_warp {
      width: 750upx;
      height: 204upx;
      background: #ffffff;
      padding: 20upx 30upx;

      .con_header {
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          align-items: baseline;
          display: flex;

          .show_title {
            color: #666666;
            font-size: 32upx;
          }

          .title {
            font-size: 22upx;
            font-weight: 500;
            margin-left: 10upx;
          }
        }

        .right {
          font-size: 24upx;
        }
      }

      .content {
        margin-top: 26upx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: center;

          .icon {
            width: 90upx;
            height: 90upx;
            flex-shrink: 0;
            border-radius: 50%;
            overflow: hidden;
          }

          .info {
            margin-left: 20upx;

            .info_top {
              height: 44upx;
              font-size: 32upx;
              font-weight: bold;
              line-height: 44upx;
              color: #333333;
            }

            .info_name {
              margin-top: 12upx;
              height: 34upx;
              font-size: 24upx;
              font-weight: 500;
              line-height: 34upx;
              color: #999999;
            }
          }
        }

        .right {
          width: 132upx;
          height: 48upx;
          background: linear-gradient(90deg, #f34235 0%, #faad14 100%);
          border-radius: 24upx;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .guize_warp {
    width: 690upx;
    height: 920upx;
    background: #ffffff;
    opacity: 1;
    border-radius: 20upx;
    padding: 50upx 40upx;
    position: relative;

    .guize_title {
      width: 100%;
      height: 50upx;
      font-size: 36upx;
      font-weight: bold;
      line-height: 50upx;
      color: #333333;
      text-align: center;
    }

    .guize_content {
      width: 100%;
      height: 748upx;
      font-size: 28upx;
      font-weight: 500;
      line-height: 52upx;
      color: #666666;
    }

    .image_warp {
      width: 100upx;
      height: 100upx;
      overflow: hidden;
      position: absolute;
      background: #7f7f7f;
      left: 50%;
      bottom: -100upx;
      transform: translateX(-50%);
    }
  }

  .u-tabs {
    width: 100%;
    height: 80upx;
    border-bottom: 2upx solid #eee;
  }

  .mian_warp {
    .swiper_warp {
      .swiper {
        .swiper-item {
          width: 100%;
          height: 100%;

          .teacher_warp {
            width: 100%;
            height: 172upx;
            border-bottom: 2upx solid #eee;
            padding: 0 30upx;
            display: flex;
            align-items: center;
            background: #fff;
            margin-top: 10upx;

            .teacher_img {
              width: 90upx;
              height: 90upx;
              background: #cfcfcf;
              border-radius: 50%;
            }

            .teacher_name {
              margin-left: 22upx;
              font-size: 36upx;
              font-weight: bold;
            }
          }

          .coures_introduce {
            padding: 0 30upx;
            position: relative;

            .coures_title {
              width: 120upx;
              height: 42upx;
              font-size: 30upx;
              font-weight: bold;
              line-height: 42upx;
            }

            .coures_teacher_title {
              margin: 18upx 0;
            }

            .coures_text {
              width: 100%;
              height: 120upx;
              font-weight: 500;
              line-height: 40upx;
              color: #666666;

              image {
                width: 100%;
              }
            }
          }

          .content_warp {
            margin-top: 20upx;
            width: 750upx;
            background: rgba(0, 0, 0, 0);
            padding: 0 30upx;

            image {
              width: 100%;
            }
          }

          .directory_item {
            width: 100%;
            padding: 20upx;

            .directory_title {
              height: 42upx;
              font-size: 30upx;
              font-weight: bold;
              line-height: 42upx;
            }

            .directory_active {
              color: #f34235;
            }

            .directory_bottom {
              margin-top: 10upx;

              .directory_bottom_item {
                height: 40upx;
                font-weight: 500;
                line-height: 40upx;
                color: #999999;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .living_img {
                  width: 28upx;
                  height: 28upx;
                  margin-right: 14upx;
                }
              }

              .directory_active {
                color: #f34235;
              }
            }
          }

          .comments_view {
            width: 100%;
            height: 164upx;
            border-bottom: 2upx solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .comments_score {
              height: 66upx;
              font-size: 48upx;
              font-weight: 800;
              line-height: 66upx;
              color: #fe9700;
            }

            .comments_score_warp {
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-direction: column;

              .comments_score_item {
                height: 34upx;
                font-size: 28upx;
                font-weight: 500;
                line-height: 34upx;
                color: #999999;
                margin-top: 10upx;
              }
            }

            .comments_right {
              justify-content: center;
              display: flex;
              align-items: center;
              flex-direction: column;

              .comments_right_score {
                height: 50upx;
                font-size: 36upx;
                font-weight: 800;
                line-height: 50upx;
              }

              .comments_right_score_text {
                margin-top: 12upx;
                height: 40upx;
                font-weight: 500;
                line-height: 40upx;
                color: #999999;
              }
            }
          }

          .comments_warp {
            padding: 30upx;
            display: flex;
            align-items: center;
            border-bottom: 2upx solid #eee;

            &:last-child {
              border-bottom: 0 solid #eee;
            }

            .left_image {
              flex-shrink: 0;
              width: 80upx;
              height: 100%;

              .image_warp {
                width: 80upx;
                height: 80upx;
              }
            }

            .right_warp {
              margin-left: 20upx;
              flex: 1;

              .header {
                height: 80upx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .header_left {
                  display: flex;
                  align-items: center;
                  justify-content: space-around;

                  .wx_name {
                    height: 40upx;
                    font-weight: bold;
                    line-height: 40upx;
                  }

                  .score {
                    margin-left: 26upx;
                  }
                }

                .time {
                  height: 32upx;
                  font-size: 22upx;
                  font-weight: 500;
                  line-height: 32upx;
                  color: #999999;
                }
              }

              .comments_content_item {
                height: 80upx;
                font-weight: 500;
                line-height: 40upx;
              }
            }
          }
        }
      }
    }

    .bottom_warp {
      width: 100%;
      background: #fff;
      position: fixed;
      left: 0;
      bottom: 0;

      .btn_warp {
        width: 100%;
        height: 60px;
        border-radius: 20upx 20upx 0 0;
        display: flex;
        align-items: center;

        .left_btn {
          background: #fff;
        }

        .right_btn {
          flex: 1;
          color: #fff;
          background: linear-gradient(to right, #fe9601, #f34334);
        }

        .btn {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36upx;
          font-weight: 700;
        }

        input {
          width: 690upx;
          height: 40px;
          background: #eee;
          margin-left: 30upx;
          border-radius: 20px;
          padding-left: 30upx;
        }
      }
    }
  }
}
</style>
